<template>
  <view class="search-component">
    <!-- 输入搜索内容 -->
    <view class="search-layout-input" v-if="inputType == 1">
      <view class="icon-box">
        <text class="iconfont end-icon icon-weibiaoti--17"></text>
      </view>
      <view class="search-text-list" @click="inputType = 2">
        <swiper
          class="swiper"
          circular
          :vertical="true"
          :autoplay="true"
          :interval="5000"
          :duration="300"
        >
          <swiper-item>
            <view class="swiper-item">懂车帝 | 奥迪Q4 e-tron</view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item"
              >懂车帝 | Model Y <text class="hot-text">热榜TOP1</text>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item">懂车帝 | 宝马Z4</view>
          </swiper-item>
        </swiper>
        <view class="search-btn"> <text class="search-text">搜索</text> </view>
      </view>

      <text class="iconfont icon-weibiaoti--11"></text>
    </view>

    <view class="search-layout-input" v-else>
      <view class="icon-box" @click="inputType = 1">
        <text class="iconfont end-icon icon-weibiaoti--10"></text>
      </view>
      <view class="search-input-box">
        <text class="iconfont end-icon icon-weibiaoti--4"></text>
        <input
          type="text"
          class="search-input"
          v-model="inputValue"
          placeholder="懂车帝 | 奥迪Q4 e-tron"
          placeholder-class="placeholder-style"
          :focus="true"
        />
        <text
          v-if="inputValue != ''"
          class="iconfont end-icon icon-weibiaoti--13"
          @click="clearInputValue"
        ></text>
      </view>
      <text class="search-text-b">搜索</text>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "search003",
  props: {},
  components: {},
  setup() {
    const data = reactive({
      inputType: 1,
      inputValue: "",
    });

    const clearInputValue = () => {
      data.inputValue = "";
    };
    return {
      clearInputValue,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.search-component {
  .search-layout-input {
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    padding: 10rpx 0rpx;
    box-sizing: border-box;
    background: #fff;
    .icon-box {
      line-height: 80rpx;
      margin: 0 20rpx;
      overflow: hidden;
      text-align: left;
      transition: 0.3s;
      .icon-weibiaoti--17,
      .icon-weibiaoti--10 {
        font-size: 40rpx;
      }
    }
    .search-text-list {
      position: relative;
      flex: 1;
      height: 100%;
      line-height: 72rpx;
      box-sizing: border-box;
      color: #000;
      border-radius: 16rpx;
      background: #fff;
      border: 4rpx solid #000;
      padding-left: 20rpx;
      overflow: hidden;
      .swiper {
        height: 100%;
        .swiper-item {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          font-weight: 300;
          .hot-text {
            color: #be8936;
            height: 24rpx;
            line-height: 24rpx;
            border: 1rpx solid #bc8938;
            padding: 0 8rpx;
            border-radius: 6rpx;
            font-size: 20rpx;
            margin-left: 10rpx;
          }
        }
      }
      .search-btn {
        position: absolute;
        top: 6rpx;
        right: 5rpx;
        width: 86rpx;
        height: 62rpx;
        border-radius: 10rpx;
        background: #f5cc56;
        .search-text {
          position: absolute;
          top: 50%;
          left: 45%;
          width: 100%;
          transform: translate(-50%, -50%);
          z-index: 1;
          font-size: 26rpx;
          text-align: center;
          line-height: 54rpx;
          color: #000;
        }
        &::after {
          content: "";
          position: absolute;
          height: 62.5rpx;
          top: 0;
          left: -10rpx;
          right: 10rpx;
          bottom: 0;
          background: #f5cc56;
          transform: skewX(-20deg);
          border-radius: 10rpx;
        }
      }
    }

    .icon-weibiaoti--11 {
      line-height: 80rpx;
      margin: 0 20rpx;
      font-size: 40rpx;
      font-weight: 500;
    }
    .search-text-b {
      line-height: 80rpx;
      margin: 0 20rpx;
      font-size: 30rpx;
      font-weight: 500;
    }
    .search-input-box {
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      .icon-weibiaoti--4 {
        font-size: 34rpx;
        position: absolute;
        color: #666;
        left: 20rpx;
        top: 50%;
      }
      .search-input {
        width: 100%;
        height: 90%;
        padding-left: 70rpx;
        box-sizing: border-box;
        color: #000;
        border-radius: 8rpx;
        background: #e9e9e9;
        overflow: hidden;
        font-size: 28rpx;
        font-weight: 300;
        //   placeholder样式修改
        .placeholder-style {
          color: #777;
        }
      }
      .end-icon {
        font-size: 34rpx;
        position: absolute;
        color: #666;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>
